<template>
  <div class="block">
    <div style="text-align:center">
      <el-form :inline="true" :model="lawerForm" class="demo-form-inline">
      <el-form-item label="请输入要查询法人的id">
        <el-input v-model="lawerForm.id" maxlength="4" show-word-limit>法人id</el-input>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
       <el-button type="primary" icon="el-icon-star-off" @click="onOpen">添加新的法人</el-button>
      </el-form-item>
      </el-form>
    </div>
<!-- 表单 -->
 <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{textAlign:'center'}"
    :cell-style="{textAlign:'center'}"
    :row-class-name="tableRowClassName">
    <el-table-column
        label="序号"
        align="center"
        type="index"
        width="50">
    </el-table-column>
    <el-table-column
      prop="id"
      label="身份id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="300">
    </el-table-column>
    <el-table-column
    prop="option"
    label="操作">
    <template slot-scope="scope">
     <el-button type="primary" icon="el-icon-edit" @click="onOpen2(scope.$index,scope.row)" circle>修改信息</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="remove(scope.$index,scope.row)" circle>删除法人</el-button>
    </template>
    </el-table-column>
  </el-table>
  <!-- 分页效果 -->
  <span class="demonstration" ></span>
  <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-size=queryParams.pageSize
        :page-sizes="[1, 2, 3, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
    <!-- 弹窗数据 -->
  <el-dialog title="查询信息" :visible.sync="select">
  <el-table :data="lawer">
    <el-table-column property="id" label="身份id" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="age" label="年龄"></el-table-column>
    <el-table-column property="sex" label="性别"></el-table-column>
  </el-table>
</el-dialog>
<!-- 插入弹窗 -->
<el-dialog title="添加新的法人" :visible.sync="open">
    <el-form :model="ilawer">
      <el-form-item label="姓名:">
        <el-input v-model="ilawer.name" placeholder="请输入姓名" maxlength="4" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="年龄:">
        <el-input v-model="ilawer.age" placeholder="请输入年龄" maxlength="3" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="性别:">
        <el-input v-model="ilawer.sex" placeholder="请输入性别" maxlength="6" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
    </el-form>
  <el-row>
    <div style="text-align: center">
        <el-button round type="success" @click="onInsert" plain>添加</el-button>
      <el-button round type="info" @click="reset()" plain>重置</el-button>
      </div>
  </el-row>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog title="修改法人信息" :visible.sync="open2">
 <el-form :model="ulawer">
      <el-form-item label="身份id:">
        <el-input v-model="ulawer.id" disabled="true" maxlength="4" style="width:80%;" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="ulawer.name" placeholder="请更改姓名" maxlength="4" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="年龄:">
        <el-input v-model="ulawer.age" placeholder="请更改年龄" maxlength="3" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="性别:">
        <el-input v-model="ulawer.sex" placeholder="请更改性别" maxlength="3" style="width:80%;margin-left:12px" show-word-limit></el-input>
      </el-form-item>
    </el-form>
  <el-row>
    <div style="text-align: center">
        <el-button type="primary" @click="onUpdate" plain>更改</el-button>
      <el-button type="info" @click="reset()" plain>重置</el-button>
      </div>
  </el-row>
</el-dialog>
  </div>
</template>

// 表格样式
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  /* 修改输入框的长度 */
</style>



<script>
import {getLawerList,selectLawer,deleteLawer,addLawer,updateLawer} from "@/api/enterprise/lawer"

  export default {
    data() {
      return {
        lawer:[],
        lawerForm:{
          id:''
        },
        ilawer:{
          id:'',
          name:'',
          age:'',
          sex:'',
        },
        ulawer:{
          name:'',
          age:'',
          sex:'',
        },
        formInline: {
          user: '',
          region: ''
        },
      tableData: {
          id:'',
          name:'',
          age:'',
          sex:'',
      },
      queryParams:{
        pageNum:1,
        pageSize:10
      },
        total:10,
        pageSize:2,
        select: false,
        insert:false,
        update:false,
        open:false,
        open2:false
      }
    },
    created(){
      this.List()
    },
    methods: {
      selectLawer,deleteLawer,getLawerList,addLawer,updateLawer,
      // 法人列表：
      List(){
        getLawerList(this.queryParams).then(res=>{
          // 把从后端获取的列表中的内容填到tableData中
          this.tableData=res.data
        })
      },
      // 法人查询：
      onSearch(){
        this.selectLawer({id:this.lawerForm.id}).then(res=>{
          if(res.data!=null){
            this.lawer = [res.data];
            this.select = true;;
          }
          else{
            alert("该用户不存在")
          }
        })
      },
      // 窗口打开
      onOpen(){
        this.open=true;
      },
      onOpen2(index,row){
        this.open2=true;
        this.ulawer=JSON.parse(JSON.stringify(this.tableData[index]))
      },
      //法人新增:
      onInsert: function() {
        this.addLawer(this.ilawer).then(response => {
          this.insert = true;
          this.msgSuccess(response.msg);
          this.List();
          this.open=false;
          });
      },
      //法人更改:
      onUpdate: function(){
          this.updateLawer(this.ulawer).then(response =>{
          this.update = true;
          this.msgSuccess("更改成功")
          this.List();
          this.open2=false;
        })
      },
      // 法人数据删除
      remove(index,row){
        this.deleteLawer(JSON.stringify({'id':row.id})).then(res=>{
          this.List()
        })
          alert("删除成功")
      },
      // 数据重置
      reset(){
        this.ilawer={};
        this.ulawer={};
      },
       handleSizeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = val;
        this.List()
      },
      // 分页
      handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.List()
    },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>
